<template>
    <div style="font-size: 20px">
        <div>
            <h3>静态数据如下</h3>
        </div>
        <div>
            list: [
            { id: 1, name: '办公管理', pid: 0 },
            { id: 2, name: '请假申请', pid: 1 },
            { id: 3, name: '出差申请', pid: 1 },
            { id: 4, name: '请假记录', pid: 2 },
            { id: 5, name: '系统设置', pid: 0 },
            { id: 6, name: '权限管理', pid: 5 },
            { id: 7, name: '用户角色', pid: 6 },
            { id: 8, name: '菜单设置', pid: 6 }
            ]
        </div>
        <div><h3>调用let treeData = toTree(this.list)后打印treeData得到的数据如下</h3></div>
        <div>
            [{"id":1,"name":"办公管理","pid":0,"children":[{"id":2,"name":"请假申请","pid":1,"children":[{"id":4,"name":"请假记录","pid":2}]},{"id":3,"name":"出差申请","pid":1}]},{"id":5,"name":"系统设置","pid":0,"children":[{"id":6,"name":"权限管理","pid":5,"children":[{"id":7,"name":"用户角色","pid":6},{"id":8,"name":"菜单设置","pid":6}]}]}]
        </div>
        <div><h3>调用treeFind(treeData, 7, 'id', 'name', '999', 'children') 打印treeData得到的数据如下</h3></div>
        <div>
            [{"id":1,"name":"办公管理","pid":0,"children":[{"id":2,"name":"请假申请","pid":1,"children":[{"id":4,"name":"请假记录","pid":2}]},{"id":3,"name":"出差申请","pid":1}]},{"id":5,"name":"系统设置","pid":0,"children":[{"id":6,"name":"权限管理","pid":5,"children":<span style="color: red;">[{"id":7,"name":"999","pid":6}</span>,{"id":8,"name":"菜单设置","pid":6}]}]}]
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      list: [
        { id: 1, name: '办公管理', pid: 0 },
        { id: 2, name: '请假申请', pid: 1 },
        { id: 3, name: '出差申请', pid: 1 },
        { id: 4, name: '请假记录', pid: 2 },
        { id: 5, name: '系统设置', pid: 0 },
        { id: 6, name: '权限管理', pid: 5 },
        { id: 7, name: '用户角色', pid: 6 },
        { id: 8, name: '菜单设置', pid: 6 }
      ],
      treeData: []
    }
  },
  mounted () {
    let treeData = this.$common.util.toTree(this.list)
    console.log(JSON.stringify(treeData), '组装后的树形数据')
    this.treeData = treeData
    this.$common.util.treeFind(treeData, 7, 'id', 'name', '999', 'children')
    console.log(JSON.stringify(treeData), '把对应的id7的name修改成了999')
  }
}
</script>

<style scoped>

</style>
